import * as React from 'react';
import {BottomNavigation, Text, Appbar} from 'react-native-paper';
import Login from './../login/login';
import Header from './../header/header';
import {View} from 'react-native';
import List from '../list/list';
import My from '../my/my';

// const MusicRoute = () => <Text>Music</Text>;

// const RecentsRoute = () => <Text>Recents</Text>;

export default class main extends React.Component {
  constructor(props) {
    super(props);
    console.log('BottomNavigation props:', props);
  }

  state = {
    index: 0,
    routes: [
      {key: 'music', title: '歌单', icon: 'music'},
      {key: 'albums', title: '个人中心', icon: 'account'},
      //   {key: 'recents', title: 'Recents', icon: 'history'},
    ],
  };

  _handleIndexChange = index => this.setState({index});

  _renderScene = BottomNavigation.SceneMap({
    music: () => <List navigation={this.props.navigation} />,
    albums: () => <My navigation={this.props.navigation} />,
    // recents: RecentsRoute,
  });

  render() {
    return (
      <BottomNavigation
        navigationState={this.state}
        onIndexChange={this._handleIndexChange}
        renderScene={this._renderScene}
        navigation={this.props}
      />
    );
  }
}
